<template>
    <el-row :gutter="20" class="mainDiv">    
            <div class="rowHead">
                <el-input v-model="acco.name" disabled class="w30 mr">
                    <template slot="prepend">账户名</template>
                </el-input>
                <el-input v-model="acco.balance" disabled class="w30">
                    <template slot="prepend">账户余额</template>
                </el-input>
            </div>
            <el-table height="100%" :data="logs" :stripe="true">
                <el-table-column prop="orderid" label="订单ID"></el-table-column>
                <el-table-column label="收支类型">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.ordertype === 'KKD'">开卡</el-tag>
                        <el-tag type="success" v-else-if="scope.row.ordertype === 'LSD'">开单</el-tag>
                        <el-tag type="success" v-else-if="scope.row.ordertype === 'CZD'">充值</el-tag>
                        <el-tag type="info" v-else-if="scope.row.ordertype === 'TKD'">退卡</el-tag>
                        <el-tag type="info" v-else-if="scope.row.ordertype === 'TQD'">退款</el-tag>
                        <el-tag v-else-if="scope.row.ordertype === 'LLD'">领料</el-tag>
                        <el-tag v-else-if="scope.row.ordertype === 'TLD'">退料</el-tag>
                        <el-tag v-else-if="scope.row.ordertype === 'RKD'">入库</el-tag>
                        <el-tag v-else-if="scope.row.ordertype === 'CKD'">出库</el-tag>
                        <el-tag type="info" v-else-if="scope.row.ordertype === 'ZCD'">费用支出</el-tag>
                        <el-tag type="success" v-else-if="scope.row.ordertype === 'SRD'">费用收入</el-tag>
                        <el-tag type="warning" v-else>其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="收支金额">
                    <template slot-scope="scope">
                        <el-row v-if="scope.row.ordertype === 'ZCD'">{{scope.row.money+'元'}}</el-row>
                        <el-row v-else>{{scope.row.money+'元'}}</el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="orderid" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.ordertype !== 'ZCD'&& scope.row.ordertype !== 'SRD'" type="info" icon="h-chakan" size="small" @click="chakan(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="addtime" label="收支时间">
                    <template slot-scope="scope">
                        {{time(scope.row.addtime)}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="rowHead">
                <el-pagination @current-change="currentChange" @size-change="sizeChange" :current-page="page.currentPage" :page-sizes="[15, 30, 500, 100]" :page-size="page.pageSize" layout="sizes, prev, pager, next" :total="page.total">
                </el-pagination>
            </div>
    </el-row>
</template>
<script>
import C from '#/src/common/common.js'
import P from '#/src/shop/popup.js'

export default {
    name: 'accountInfo',
    data() {
        return {
            logs: [],
            acco: {},
            aaac: [],
            page: {
                currentPage: 1,
                pageSize: 15,
                total: 0,
            },
            id: C.getDatas().id,
        }
    },
    methods: {
        sizeChange: function(val) {
            this.page.pageSize = val
            this.getList()
        },
        currentChange: function(val) {
            this.page.currentPage = val
            this.getList()
        },
        getList: async function() {
            let url = '/shop/account/accountlogs'
            let filter = { pages: this.page.currentPage, limits: this.page.pageSize, id: this.id }
            let data = await C.ajax(url, filter, 'post')
            if (data) {
                this.acco = data.ainfo
                this.logs = data.logs.data
                this.aaac.push(data.alls)
                this.page.total = data.logs.count
            }
        },

        chakan: async function(row) {
            let obj = { id: row.orderid, ordertype: row.ordertype }
            await P.showOrderPopup(obj)
        },
        time: function(unix) {
            return C.times(unix)
        },
    },
    mounted: function() {
        this.getList()
    }
}
</script>
<style>
.ov {
    overflow: hidden;
}

.ov-x {
    overflow-x: hidden;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear {
    clear: both;
}

.none {
    display: none;
}

.block {
    display: block;
}

.handel {
    cursor: pointer;
}



/*背景颜色-前景颜色*/

.bg-dark {
    background: #F9FAFC;
}

.bg-extra {
    background: #EFF2F7;
}

.bg-light {
    background: #E5E9F2;
}

.bg-gray {
    background: #D3DCE6;
}

.bg-silver {
    background: #8492A6;
}

.bg-black {
    background: #324057;
}

.white {
    color: white;
}

.black {
    color: #324057;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.color-nan {
    color: #2a91f7;
}

.color-nv {
    color: #f7992a;
}



/*其他样式*/

html {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    font-weight: 400;
}

.title {
    font-size: 16px;
    font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    line-height: 26px;
    margin: 10px 0;
}

.border {
    border: 1px solid #dfe6ec;
    border-radius: 4px;
    padding: 0 8px;
}

.bd {
    border: 1px solid #dfe6ec;
}

.border-b {
    border-bottom: 1px solid #dfe6ec;
}

.border-t {
    border-top: 1px solid #dfe6ec;
}

.bd-l {
    border-left: 1px dashed #dfe6ec;
}

.bd-t {
    border-top: 1px dashed #dfe6ec;
}

.bd-r {
    border-radius: 50%;
}

.underline {
    text-decoration: underline;
}



/*边距*/

.p0 {
    padding: 0 !important;
}

.m0 {
    margin: 0 !important;
}

.m10 {
    margin: 10px !important;
}

.m15 {
    margin: 15px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.ml {
    margin-left: 15px !important;
}

.mr {
    margin-right: 15px !important;
}

.mb {
    margin-bottom: 15px !important;
}

.mt {
    margin-top: 15px !important;
}

.pl {
    padding-left: 15px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pr {
    padding-right: 15px !important;
}

.pr0 {
    padding-right: 0 !important;
}

.pb {
    padding-bottom: 15px !important;
}

.pt {
    padding-top: 15px !important;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.w100 {
    width: 100px !important;
}

.w150 {
    width: 150px !important;
}

.w200 {
    width: 200px !important;
}

.w300 {
    width: 300px !important;
}

.w400 {
    width: 400px !important;
}

.w500 {
    width: 500px !important;
}

.w30 {
    width: 30%;
}

.w50 {
    width: 50%;
}

.width95 {
    width: 95%;
}

.width {
    width: 100% !important;
}

.h200 {
    height: 200px;
}

.h300 {
    height: 300px;
}

.h500 {
    height: 500px;
}

.h600 {
    height: 600px;
}

.h700 {
    height: 700px;
}

.h800 {
    height: 800px;
}

.l28 {
    line-height: 28px;
}

.l30 {
    line-height: 30px;
}

.l50 {
    line-height: 50px;
}



/*附加订制样式*/

.el-row {
    margin: 0 !important;
}

.el-table .cell {
    padding: 0;
    text-align: center;
}

.el-textarea__inner {
    resize: none;
}

.el-input.is-disabled .el-input__inner {
    color: #20A0FF;
}

.el-textarea.is-disabled .el-textarea__inner {
    color: #444;
}

.el-switch {
    line-height: 0;
}

.el-checkbox+.el-checkbox {
    margin-left: 0;
}

.el-checkbox {
    margin-right: 20px;
}

.el-autocomplete-suggestion li {
    padding: 4px 20px;
    line-height: 20px;
}

.el-table th {
    padding: 10px 0;
}

.el-table td {
    padding: 4px 0;
}
</style>